<template>
  <div class="articleBlock">
    <div class="help-main-title">{{ itemName }}</div>
    <div class="article-list">
      <div
          class="art-item flex"
          v-for="(val, zindex) in list"
          :key="zindex"
          :class="val.download_file_ext"
      >
        <div class="art-text">
          <div class="art-title">{{ val.article_title }}</div>
          <div class="art-time">{{ parseTime(val.publish_time) }}</div>
        </div>
        <a class="art-card" :href="api+'/a/file/dl/'+val.download_file_id">
          <DownloadOutlined
              :style="{
                fontSize: '20px',
                color: 'white',
                fontWight: '600',
              }"
          />
          <span class="art-name" >下载文件</span>
        </a>
      </div>
    </div>
    <Empty v-if="!list.length  && done" description="暂无数据"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, ref } from "vue";
import { Empty } from "ant-design-vue";
import { DownloadOutlined } from "@ant-design/icons-vue";
import { getArticleListApi } from "/@/api/article";
import { parseTime , api } from "/@/utils";

export default defineComponent({
  name: "articleBlock",
  components: {
    DownloadOutlined,
    Empty
  },
  props: {
    itemId: {
      type: String,
      default: '',
    },
    itemName:{
      type: String,
      default: '',
    }
  },
  setup(props) {
    const { itemId , itemName } = toRefs(props);
    const done = ref(false);
    const list = ref([]);
    const getArticleList = async (itemId) => {
      let data = await getArticleListApi({
        itemId: itemId,
        current: 1,
        size: 10000,
      });
      let { records } = data;
      list.value = records;
      done.value = true;
    };

    const init = () => {
      getArticleList(itemId.value);
    };

    onMounted(init);

    return {
      itemName,done,
      parseTime,list,
      api
    };
  },
});
</script>

<style lang="less" scoped>
.articleBlock{
  .help-main-title {
    padding: 40px 0 0;
    font-size: 22px;
    color: #000;
  }

  .article-list {
    display: flex;
    flex-wrap: wrap;

    .art-item {
      width: 380px;
      height: 150px;
      margin: 24px 30px 0 0;
      border: 1px solid #e0e5eb;
      border-radius: 2px;
      transform: translateY(0);

      &:nth-child(3n) {
        margin-right: 0;
      }

      .art-text {
        width: 260px;
        padding: 24px 10px 24px 20px;
      }

      .art-title {
        min-height: 46px;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 24px;
        color: #000;
      }

      .art-time {
        font-size: 15px;
        color: #666;
      }

      .art-card {
        display: flex;
        flex: 1;
        height: 0;
        overflow: hidden;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        color: white;
        cursor: pointer;
        background: linear-gradient(180deg, #0078ff 0%, #4ea1ff 100%);
        transition: all linear 0.1s;

        .art-name {
          display: block;
          width: 100%;
          margin-top: 5px;
          text-align: center;
        }
      }

      &:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

        .art-card {
          // display: flex;
          height: 150px;
        }
      }

      &.pdf {
        background: url("/src/assets/img/help-pdf.png") no-repeat right 23px bottom
        33px;
      }

      &.docx {
        background: url("/src/assets/img/help-doc.png") no-repeat right 23px bottom
        33px;
      }

      &.xlsx {
        background: url("/src/assets/img/help-exc.png") no-repeat right 23px bottom
        33px;
      }

      &.zip {
        background: url("/src/assets/img/help-zip.png") no-repeat right 23px bottom
        33px;
      }
    }
  }
}
</style>
